<template>
    <view class="box">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :show-empty-view-reload-when-error="false"
            :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
            empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-error-text="暂无数据"
            bg-color="#fff "
            v-model="rowsList"
            @query="queryList"
        >
            <u-tabs
                slot="top"
                :current="currentTab"
                @change="tabChange"
                @click="tabChange"
                :scrollable="false"
                :list="list1"
                lineWidth="30"
                lineColor="#588BF3"
                :activeStyle="{
                    color: '#588BF3',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                }"
                :inactiveStyle="{
                    color: '#666666',
                    transform: 'scale(1)',
                }"
                itemStyle="padding: 0 15px; height: 44px;"
            ></u-tabs>
            <u-gap height="8" bgColor="#F6F6F6" marginTop="20"></u-gap>
            <view class="contentBox">
                <view class="rightGoods">
                    <scroll-view
                        scroll-y="true"
                        class="whiteBox"
                        @scrolltolower="scrollBottom"
                    >
                        <block v-for="(item, index) in rowsList" :key="index">
                            <view class="item" @tap="to_goodsDetail(item.id)">
                                <u-image
                                    height="180rpx"
                                    width="180rpx"
                                    :src="item.thumbnail"
                                    mode="aspectFill"
                                    radius="24rpx"
                                />
                                <view class="celldetail-t">
                                    <view class="goodName">{{
                                        item.goodsName
                                    }}</view>
                                    <u--text
                                        :prefixIcon="item.hospHospitalLogoUrl"
                                        iconStyle="font-size: 50rpx;margin-right:10rpx"
                                        color="#777777"
                                        size="14"
                                        :text="item.hospHospitalName"
                                    ></u--text>
                                    <view class="celldetail_money">
                                        <text style="font-size: 24rpx">￥</text>
                                        <text
                                            style="
                                                font-size: 34rpx;
                                                font-weight: 600;
                                            "
                                            >{{ goodsSkuListPrice(item) }}</text
                                        >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
import {
    getHospitalList,
    listOfPhysicalExaminationProducts,
    getInfo,
} from "@/api/physical.js";
export default {
    data() {
        return {
            dataDetail: {},
            currentNum: 0,
            currentTab: 0,
            useInterest: "",
            rowsList: [],
            list1: [
                {
                    value: "",
                    name: "全部",
                },
                {
                    value: "PHYSICAL_EXAMINATION_ENTRY",
                    name: "入职体检",
                },

                {
                    value: "PHYSICAL_EXAMINATION_THE_WHOLE_BODY",
                    name: "全身体检",
                },

                {
                    value: "PHYSICAL_EXAMINATION_PARENT",
                    name: "父母体检",
                },
            ],
            goodsData: {
                // 商品数据
                pageSize: 10,
                pageNum: 1,
                tenantId: "",
            },
            goodsTotal: 0, // 商品总数
            fromStore: false, //为真 从门店来
            goodsType: "",
        };
    },
    computed: {
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },
    onLoad(options) {
        this.goodsType = options.goodsType;
        this.$nextTick(() => {
            setTimeout(() => {
                this.currentTab = options.index;
            }, 10);
        });
    },

    methods: {
        async tabChange(e) {
            this.currentTab = e.index;
            await (this.goodsType = e.value);
            console.log(e);
            this.$refs.paging.reload();
        },
        // 商品触底

        async queryList(pageNo = 1, pageSize = 10) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
            };
            if (this.goodsType && this.goodsType !== "PHYSICAL_EXAMINATION")
                params.goodsType = this.goodsType;
            const { data, code } = await listOfPhysicalExaminationProducts(
                params
            );
            if (code === 200)
                this.$refs.paging.completeByTotal(data.rows, data.total);
        },
        topImageClick() {
            const that = this;
            uni.previewImage({
                current: that.dataDetail?.hospitalPicture[that.currentNum],
                urls: this.dataDetail?.hospitalPicture,
                indicator: "number",
            });
        },
        onShareAppMessage(res) {
            this.closeShare();
            return {
                title: this.dataDetail.goodsName,
                imageUrl: this.dataDetail?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
            console.log(path, "path");
        },
        onShareTimeline: function () {
            this.closeShare();
            return {
                title: this.dataDetail.goodsName,
                imageUrl: this.dataDetail?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
        },
        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
    },
};
</script>

<style lang="scss">
.box {
    height: 100vh;
    background-color: #fff;
}
.itemBox {
    padding: 0 30rpx;
    box-sizing: border-box;
    .item {
        display: flex;
        padding: 20rpx;
        .celldetail-t {
            width: 100%;
            padding: 0 6rpx 0 40rpx;
            box-sizing: border-box;

            .goodName {
                width: 100%;
                font-size: 32rpx;
                color: #3d3d3d;
                font-weight: 400;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                font-weight: 600;
            }
            .celldetail_money {
                text {
                    color: #588bf3;
                    font-size: 24rpx;
                    font-weight: 400;
                    border: 1px solid #588bf3;
                    padding: 0rpx 6rpx;
                    border-radius: 8rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
}
.timeBox1 {
    margin: 24rpx 0;
}
.contentBox {
    padding: 20rpx 28rpx;
    box-sizing: border-box;
}
.rightGoods {
    box-sizing: border-box;

    .whiteBox {
        height: 100%;
        box-sizing: border-box;

        .item {
            background-color: #fff;
            margin-bottom: 24rpx;
            border-radius: 16rpx;
            display: flex;
            .celldetail-t {
                width: 100%;
                padding: 0 6rpx 0 12rpx;
                box-sizing: border-box;

                .goodName {
                    width: 100%;
                    font-size: 28rpx;
                    color: #333;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    height: 60rpx;
                }

                .celldetail_money {
                    margin-top: 20rpx;
                    text {
                        color: #ff0000;
                        font-size: 18rpx;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>
